// App.tsx
import React from 'react';
import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import WidgetMaterial from './WidgetMaterial.tsx';
import GridArea from './GridArea';
import type { WidgetMaterial as WidgetMaterialType } from './types';

const App: React.FC = () => {
  // 物料列表
  const materials: WidgetMaterialType[] = [
    { id: 'chart', type: 'chart', name: '图表', initialWidth: 200, initialHeight: 150 },
    { id: 'table', type: 'table', name: '表格', initialWidth: 300, initialHeight: 200 },
    { id: 'text', type: 'text', name: '文本框', initialWidth: 150, initialHeight: 80 },
  ];

  return (
    <div style={{ display: 'flex', gap: 20, padding: 20 }}>
      {/* 物料区 */}
      <div style={{ width: 200, border: '1px solid #eee', padding: 16 }}>
        <h2>物料区</h2>
        {materials.map((material) => (
          <WidgetMaterial key={material.id} material={material} />
        ))}
      </div>

      {/* 网格区（包裹在 DndProvider 中启用拖放） */}
      <DndProvider backend={HTML5Backend}>
        <div style={{ flex: 1 }}>
          <h2>网格区</h2>
          <GridArea />
        </div>
      </DndProvider>
    </div>
  );
};

export default App;
